<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>EasyShare-发帖页</title>
    <link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}" sizes="32x32">
    <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="/css/main/bootstrap.min.css" th:href="@{/css/main/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="/css/backstage/style.css" th:href="@{/css/backstage/style.css}">
    <link href="/css/write/froala_editor.min.css" th:href="@{/css/write/froala_editor.min.css}" rel="stylesheet">
    <link href="/css/write/themes/dark.css" th:href="@{/css/write/themes/dark.css}" rel="stylesheet">
    <style>
        html {
            position: relative;
            min-height: 100%;
        }

        body {
            padding-bottom: 80px;
            background-image: linear-gradient(#c7ddef, #d6e9c6);
            text-align: center;
        }

        footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
        }

        section {
            width: 80%;
            margin: auto;
            text-align: left;
        }

        .black {
            color: #E8BF6A;
            background-image: none;
            background-color: #3C3F41;
        }

        .blackEdit {
            background-color: #2B2B2B;
        }

        .blackModal {
            background-color: #2B2B2B;
            color: #E8BF6A;
        }

        div.froala-element {
            cursor: text;
        }
    </style>
</head>

<body>
<span th:if="${session.user eq null}">
    <script type="text/javascript">
        location.href = "/page/noLogin?tip=请先登录";
    </script>
</span>
<input type="hidden" id="tip" th:value="${tip}">
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/article/add" method="post" id="ArticleInfo">
                <input type="hidden" name="uid" th:value="${session.user?.getUserid()}">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        补全此帖子的内容
                    </h4>
                </div>
                <div class="container" style="text-align: center">
                    <div class="row" style="margin-top: 2%">
                        <!--前缀-->
                        <div class="form-group col-lg-3">
                            <div class="input-group">
                                <span class="input-group-addon">标题</span>
                                <input class="form-control" name="articletitle" maxlength="30" type="text"
                                       placeholder="最长30位字符">
                            </div>
                        </div>
                        <div class="form-group col-lg-3">
                            <div class="input-group">
                                <span class="input-group-addon">作者</span>
                                <input class="form-control" name="articleauthor" type="text"
                                       th:value="${session.user?.getUsername()}"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="input-group" style="width: 50%">
                                <span class="glyphicon glyphicon-sound-dolby" style="margin-left: 3%">&nbsp;</span>栏目
                                <input name="articlecolumn" value="1" type="radio">前端
                                <input name="articlecolumn" value="2" type="radio" checked>后端
                                <input name="articlecolumn" value="3" type="radio">资源
                                <input name="articlecolumn" value="4" type="radio">其他
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-3">
                            <div class="input-group">
                                <span class="input-group-addon">来源</span>
                                <input class="form-control" name="articlesource" maxlength="5" type="text"
                                       placeholder="你这篇文章原文来源">
                            </div>
                        </div>
                        <div class="form-group col-lg-3">
                            <div class="input-group">
                                <span class="input-group-addon">路径</span>
                                <input class="form-control" name="articlesourcehref" maxlength="255" type="text"
                                       placeholder="来源路径(选填)">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-3">
                            <div class="input-group" style="width: 100%">
                                <span class="input-group-addon">标签</span>
                                <input class="form-control" name="articletags" maxlength="12" id="tagInput" type="text"
                                       placeholder="点击下方标签进行选择" readonly>
                            </div>
                        </div>
                        <div class="form-group col-lg-3">
                            <div class="input-group">
                                <label class="input-group-btn">
                                    <input type="button" id="i-check" value="浏览" class="btn btn-primary"
                                           onclick="$('#i-file').click();">
                                </label>
                                <input id='location' class="form-control" onclick="$('#i-file').click();" readonly
                                       placeholder="点此选择封面(推荐比例4:3)">
                            </div>
                            <input type="file" name="file" id='i-file'
                                   onchange="$('#location').val($('#i-file').val());" style="display: none">
                        </div>
                    </div>
                    <div class="row" style="width:50%;text-align: center;margin-bottom: 2%">
                        <div class="btn-group btn-group-sm" th:each="tag:${tags}">
                            <button type="button" class="btn btn-default tag-btn" th:text="${tag.getTagname()}"
                                    th:value="${tag.getTagid()}">按钮 1
                            </button>
                        </div>
                    </div>
                    <input type="hidden" name="articlecontent">
                    <div class="row" style="width:50%;text-align: center;margin-bottom: 2%">
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-warning">重置标签</button>
                        </div>
                    </div>
                    <div class="modal-footer" style="width: 50%;text-align: center">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="submit" class="btn btn-primary">
                            提交
                        </button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span
                        class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                    <span class="icon-bar"></span></button>
                <a class="navbar-brand" href="/page/backstage">EasyEdit</a></div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/"><span class="glyphicon glyphicon-arrow-left"></span>&nbsp;返回</a>
                    </li>
                    <li id="modeChange"><a href="javascript:;"><span class="glyphicon glyphicon-certificate"></span>&nbsp;<span>关灯</span></a>
                    </li>
                    <li id="clearArticle"><a href="javascript:;"><span class="glyphicon glyphicon-remove"></span>&nbsp;清空</a>
                    </li>
                    <li data-toggle="modal" data-target="#myModal"><a href="javascript:;"><span
                            class="glyphicon glyphicon-ok"></span>&nbsp;确认</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section id="editor">
    <div id='edit' style="margin-top: 30px;">
        <p>在此输入内容（最少五十个字节，复制的话会连同原文章样式一起复制，不推荐长篇编写）</p>
    </div>
</section>
<footer>
    <hr>
    POWERED BY &copy;<a href="http://www.zzx-2580.xyz" style="color: #2c82c9"
                        onmousemove="this.style='color:deepskyblue'"
                        onmouseleave="this.style='color:#2c82c9'">EasyShare
    zzx-2580.xyz</a> ALL RIGHTS
    RESERVED &nbsp;&nbsp;&nbsp;<span><a
        href="http://www.beian.miit.gov.cn" target="_blank" style="color: #2c82c9"
        onmousemove="this.style='color:deepskyblue'"
        onmouseleave="this.style='color:#2c82c9'">
            <img src="img/备案图标.png" th:src="@{/img/备案图标.png}" alt="备案图标"></img>豫ICP备20004364号-1</a></span>
    <span
            style="display:none"><a href="">网站统计</a></span>
</footer>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/main/bootstrap.min.js" type="text/javascript" th:src="@{/js/main/bootstrap.min.js}"></script>
<script src="/js/write/froala_editor.min.js" th:src="@{/js/write/froala_editor.min.js}"></script>
<!--[if lt IE 9]>
<script src="/js/write/froala_editor_ie8.min.js" th:src="@{/js/write/froala_editor_ie8.min.js}"></script>
<![endif]-->
<script src="/js/write/plugins/tables.min.js" th:src="@{/js/write/plugins/tables.min.js}"></script>
<script src="/js/write/plugins/lists.min.js" th:src="@{/js/write/plugins/lists.min.js}"></script>
<script src="/js/write/plugins/colors.min.js" th:src="@{/js/write/plugins/colors.min.js}"></script>
<script src="/js/write/plugins/media_manager.min.js" th:src="@{/js/write/plugins/media_manager.min.js}"></script>
<script src="/js/write/plugins/font_family.min.js" th:src="@{/js/write/plugins/font_family.min.js}"></script>
<script src="/js/write/plugins/font_size.min.js" th:src="@{/js/write/plugins/font_size.min.js}"></script>
<script src="/js/write/plugins/block_styles.min.js" th:src="@{/js/write/plugins/block_styles.min.js}"></script>
<script src="/js/write/plugins/video.min.js" th:src="@{/js/write/plugins/video.min.js}"></script>
<script src="/js/write/plugins/file_upload.min.js" th:src="@{/js/write/plugins/file_upload.min.js}"></script>
<script src="/js/write/langs/zh_cn.js"></script>
<script type="text/javascript">
    $(function () {
        $('#edit').editable({
            inlineMode: false,
            alwaysBlank: true,
            language: "zh_cn",
            imageUploadURL: "/upload/img",
            plainPaste: false
        })
    });

    function getOsInfo() {
        var userAgent = navigator.userAgent.toLowerCase();
        var name = 'Unknown';
        var version = 'Unknown';
        if (userAgent.indexOf('win') > -1) {
            name = 'Windows';
            if (userAgent.indexOf('windows nt 5.0') > -1) {
                version = '2000';
            } else if (userAgent.indexOf('windows nt 5.1') > -1 || userAgent.indexOf('windows nt 5.2') > -1) {
                version = 'XP';
            } else if (userAgent.indexOf('windows nt 6.0') > -1) {
                version = 'Vista';
            } else if (userAgent.indexOf('windows nt 6.1') > -1 || userAgent.indexOf('windows 7') > -1) {
                version = '7';
            } else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows 8') > -1) {
                version = '8';
            } else if (userAgent.indexOf('windows nt 6.3') > -1) {
                version = '8.1';
            } else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows nt 10.0') > -1) {
                version = '10';
            } else {
                version = 'Unknown';
            }
        } else if (userAgent.indexOf('iphone') > -1) {
            name = 'Iphone';
        } else if (userAgent.indexOf('mac') > -1) {
            name = 'Mac';
        } else if (userAgent.indexOf('x11') > -1 || userAgent.indexOf('unix') > -1 || userAgent.indexOf('sunname') > -1 || userAgent.indexOf('bsd') > -1) {
            name = 'Unix';
        } else if (userAgent.indexOf('linux') > -1) {
            if (userAgent.indexOf('android') > -1) {
                name = 'Android';
            } else {
                name = 'Linux';
            }
        } else {
            name = 'Unknown';
        }
        return name;
    }

    const osName = getOsInfo();

    if (osName == "Android") {
        alert("推荐使用PC版网站进行写作");
        location.href = "/";
    }

    var tip = $("#tip").val();
    if (tip.trim() != "") {
        alert(tip);
    }

    $("ul.navbar-right li a").css("color", "gray");

    //0为白天模式，1为夜间模式
    var mode = 0;
    $("#modeChange").click(function () {
        if (mode == 0) {
            $("body").addClass("black");
            $("header nav").addClass("black");
            $("div.froala-editor").addClass("dark-theme");
            $("#edit").addClass("blackEdit");
            $("div.modal-content").addClass("blackModal");
            $("ul.navbar-right li a").css("color", "#CC7832");
            $(this).find("a span:eq(1)").text("开灯");
            alert("已为您开启夜间模式\n(夜间的文本编辑器文字会默认为淡黄色，提交后仍为正常颜色)");
            mode = 1;
        } else if (mode == 1) {
            $("body").removeClass("black");
            $("header nav").removeClass("black");
            $("div.froala-editor").removeClass("dark-theme");
            $("#edit").removeClass("blackEdit");
            $("div.modal-content").removeClass("blackModal");
            $("ul.navbar-right li a").css("color", "gray");
            $(this).find("a span:eq(1)").text("关灯");
            alert("已为您关闭夜间模式");
            mode = 0;
        }
    });

    $("#clearArticle").click(function () {
        $("div.froala-element").text("");
    });

    $("div.row:eq(1) input[type='radio']").css("margin-left", "30px");

    var count = 0;
    $("button.tag-btn").click(function () {
        count += 1;
        var content = $("input#tagInput").val();
        $(this).addClass("disabled").attr("disabled", "1");
        if (content.trim() == "") {
            $("input#tagInput").val($("input#tagInput").val() + $(this).text());
        } else {
            $("input#tagInput").val($("input#tagInput").val() + "," + $(this).text());
        }
        if (count >= 3) {
            $(this).parent().parent().hide("slow");
        }
    });

    $("button.btn-warning").click(function () {
        $("input#tagInput").val("");
        $("button.tag-btn").removeClass("disabled").removeAttr("disabled");
        $("div.btn-group-sm").parent().show("slow");
        count = 0;
    });

    $("form#ArticleInfo").submit(function () {
        var hrefReg = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
        var inputs = $("input.form-control");
        if (inputs.eq(0).val().trim() == "") {
            alert("标题不能为空");
            return false;
        }
        if (inputs.eq(2).val().trim() == "") {
            alert("来源不能为空");
            return false;
        }
        var input3 = inputs.eq(3).val();
        if (input3 != "" && !hrefReg.test(input3)) {
            alert("来源路径格式不正确");
            return false;
        }
        if (inputs.eq(4).val().trim() == "") {
            alert("标签不能为空");
            return false;
        }
        if (inputs.eq(5).val().trim() == "") {
            alert("封面不能为空");
            return false;
        }
        var flag = false;
        var articleLen = $("div.froala-element").text().length;
        if (articleLen > 50) {
            var inputContent = null;
            inputContent = $("input.form-control:eq(0)").val();
            if (inputContent.trim() == "") {
                alert("标题不能为空");
                return false;
            }
            $(this).find("input[name='articlecontent']").val($("div.froala-element").html());
            var formData = new FormData();
            formData.append('file', $('#i-file')[0].files[0]);  //添加图片信息的参数
            $.ajax({
                url: "/upload/img?cover=1",
                type: "POST",
                dataType: "json",
                cache: false,
                data: formData,
                processData: false,// 不处理数据
                contentType: false, // 不设置内容类型
                async: false,
                success: function () {
                    flag = true;
                }, error() {
                    flag = false;
                }
            });
        } else {
            alert("正文内容最少五十个字符长度");
            flag = false;
        }
        return flag;
    });
</script>
</body>
</html>
